<template>
  <cover-page @close="$emit('close')" :show="show" cardStyle="height: 80%;background:#f0f0f0">
    <h2 style="text-align:center">游戏帮助</h2>
    <div class="help_page" v-if="page==1">
      <h2>标题页面</h2>
      <hr>
      <img src="@/assets/img/home/version.png" alt="">
      <p>点击版本号可以查看各个版本信息。</p>
      <img src="@/assets/img/home/about.png" alt="">
      <p>点击作者名可以查看最帅的人的信息。</p>
      <img src="@/assets/img/home/star.png" alt="">
      <p>点击星星可以进行难度选择。</p>
      <img src="@/assets/img/home/addorsub.png" alt="">
      <p>也可以修改数值进行自定义游戏，符号按钮可以调节数值大小，点击数字可以唤出输入框进行快捷编辑。</p>
        <p>三个方向不能超过20，雷数不能超过999，雷占比不能超过80%。</p>
      <img src="@/assets/img/home/mode.png" alt="">
      <p>模式选择可以选择两个游戏模式，模式介绍看后面第N页，我猜模式介绍写出来之后可能忘了改这个N，写长点提醒我。</p>
      <img src="@/assets/img/home/helpandtop.png" alt="">
      <p>排行榜按钮可以打开排行榜，帮助按钮可以打开你现在看的页面。为了让颜表情显示完整我再水几个字，算了，换行吧<br>ヽ(ー_ー)ノ</p>
      <img src="@/assets/img/home/play.png" alt="">
      <p>点这个你信不信可以开始游戏？</p>
      <div class="col">
        <img src="@/assets/img/home/setting.png" alt="">
        <p>点击打开万能的设置选项卡，啥？不万能？跟作者提去ψ(*｀ー´)ψ</p>
      </div>
      <p>只有第一页这么皮，之后几页没有，我错了QAQ，以后还敢~</p>
    </div>
    <div class="help_page" v-else-if="page==2">
      <h2>游戏界面</h2>
      <hr>
      <div class="col">
        <img src="@/assets/img/game/1.png" alt="">
        <p>左上角的按钮为菜单按钮，点击可以打开菜单列表，菜单列表包含home键和重玩键，可以在设置页面设置是否直接显示菜单列表。</p>
      </div>
      <img src="@/assets/img/game/2.png" alt="">
      <p>右上角记录剩余的雷数和游戏的持续时间，当你对第一个方块进行操作时会启动计时。</p>
      <div class="col">
        <img src="@/assets/img/game/3.png" alt="">
        <p>手指滑动游戏页面可以进行旋转，双指可以进行缩放和平移，点击该按钮可以重置镜头，防止转飞。</p>
      </div>
      <img src="@/assets/img/game/4.png" alt="">
      <p>红色按钮可以隐藏对应的层，蓝色按钮可以取消该方向上的隐藏，点击白色区域可以对按钮状态进行切换。</p>
      <img src="@/assets/img/game/6.png" alt="">
      <p>第一个按钮选中状态可以对游戏进行挖掘操作，</p>
      <p>第二个按钮选中时可以对单个方块进行隐藏，</p>
      <p>第三个按钮可以进行智能隐藏可以隐藏已经知晓的方块。</p>
      <div class="col">
        <img src="@/assets/img/game/7.png" alt="">
        <p>第一个按钮有挖掘和插旗两种状态，选中时，再次点击可以进行状态切换，长按也可以进行插旗。</p>
      </div>
      <div class="col">
        <img src="@/assets/img/game/8.png" alt="">
        <p>当有方块被隐藏时，此时第四个按钮底色为白色，可以点击该按钮撤销隐藏。</p>
      </div>
      
      

    </div>
    <div class="help_page" v-else-if="page==3">
      <h2>游戏流程</h2>
      <hr>
      <p>点击方块即可开始游戏，第一下点过之后才开始布雷，就是说第一下不会炸掉。</p>
      <p>模式一中，每块方块记录该方块所在的三个平面内周围方块的雷数，六个面两两对应，记录三个数字。</p>
      <p>模式二中，每块方块记录该方块周围空间内雷的数目，六个面数字一致。</p>
      <p>当挖掘到的方块周围空间内没有雷时，即六个面数字全为零，该方块会自动隐藏，并且触发周围方块的点击事件。</p>
      <p>当点击数字方块时，会根据不同模式判断周围旗子的数量是否等于数字的值，来实现自动翻牌效果，
        需要注意的是，如果周围旗子标记错误会造成游戏失败。</p>
      <p>当剩余雷的数量为0时，会进行胜负判断，如果标记方块全部符合，则游戏获胜，若有出入，
        则游戏继续，此时继续插旗会使数字变为负数，为正常现象。</p>
      <p>当 “所有挖开的方块+雷的数目=方块总数” 时，游戏获胜。</p>
      <p>为降低游戏难度和防止误触，当挖掘到雷时，第一次不会立即失败，内置生命值会减一，但此时不会有任何反馈效果，
        即使通关也不是无损通关，当内置生命值为零时，游戏失败。</p>
      <p>盲扫流不可以进行任何插旗操作，自定义模式下，当雷数过多或雷密度过大时，为防止运算量过大导致游戏崩溃，自动插旗功能将被关闭。</p>
    </div>
    <div class="help_page" v-else-if="page==4">
      <h2>排行榜</h2>
      <hr>
      <p>排行榜分为本地排行榜和未开放的全国排行榜。</p>
      <p>不同模式，不同难度，不同流派的成绩会分别统计，只会记录该统计类别前十次最好的成绩。</p>
      <img src="@/assets/img/toplist/1.png" alt="">
      <p>可以通过下拉列表选择不同的榜单。</p>
      <div class="col">
        <img src="@/assets/img/toplist/2.png" alt="">
        <p>可以通过按钮切换不同的排序方式。</p>
      </div>
      <img src="@/assets/img/toplist/3.png" alt="">
      <p>总胜率是所有模式下获胜的频率，模式胜率是该榜单下获胜的频率。</p>
      <p>每条记录显示玩家名(可在设置页面进行修改)，该局耗时，记录达成时间，星号代表该次记录为无损通关。</p>
      <img src="@/assets/img/toplist/4.png" alt="">
      <p>点击单条记录可以查看详细的记录信息。</p>
    </div>
    <div class="help_page" v-else-if="page==5">
      <h2>游戏设置</h2>
      <hr>
      <p>游戏设置分为功能设置，颜色设置，字体设置，音乐设置，灵敏度设置，偏好设置。</p>
      <p>功能设置里，可以更改玩家的用户名，游戏结束后是否记录成绩；</p>
      <p>功能设置里，还可以更改游戏镜头旋转的控制器，轨迹球控制器可以绕过中心轴，默认拥有旋转惯性，可以开启旋转阻尼关掉惯性。</p>
      <p>旋转控制器的灵敏度可以在灵敏度设置中进行调节。</p>
      <p>渲染帧数可以更改游戏刷新率，最高为60fps。</p>
      <p>颜色设置可以更改主题颜色。</p>
      <p>字体设置可以更改字体类别。</p>
      <p>音乐设置可以更换游戏音效和背景音乐，选择无即为关闭。</p>
      <p>偏好设置可以更改流派，还有其他花里胡哨的选项也在里面。</p>
    </div>
    <van-pagination v-model="page" :page-count="5" mode="simple" />
  </cover-page>
</template>

<script>
import coverPage from '../../components/coverPage.vue'

export default {
  name: 'helpCard',
  props: ['show'],
  components: { coverPage },
  data() {
    return { page:1 }
  }
}
</script>

<style lang="scss" scoped>
.help_page{
  height: 100%;
  border: gray solid 2px;
  text-align: center;
  overflow: auto;
  p{
    text-indent:1em;
    margin-bottom: 1em;
    text-align: left;
  }
  img{
    text-align: center;
  }
  hr{
    margin: 5px;
  }
  .col{
    display:flex;
    align-items: center;
    margin-bottom: 1em;
    p{
      margin: 0;
    }
    img{
      margin: 0 1em;
    }
  }
}

</style>